import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import Icon from '@union-design/icon';
import SideNav from '@union-design/side-nav';
import Tooltip from '@union-design/tooltip';
import '@union-design/tooltip/lib/styles/index.css';
import '@union-design/side-nav/lib/styles/index.css';

const filterDisplayZero = (menuItems) => {
  return menuItems.filter((item) => item.display !== 0);
};

const menu: React.FC = (props: any) => {
  const [data, setDate] = useState(); // 菜单数据

  useEffect(() => {
    props.dispatch({
      type: 'menuslider/staffInfoSourceFetch',
      payload: {
        resourceCode: 'menu_automated_system',
      },
      callback: (staffInfoSource: any) => {
        setDate(filterDisplayZero(staffInfoSource));
      },
    });
  }, []);

  const iconMap = {
    1: <Icon type="app-line" style={{ fontSize: 18 }} />,
    2: <Icon type="setting-line" style={{ fontSize: 18 }} />,
    3: <Icon type="menu-line" style={{ fontSize: 18 }} />,
    4: <Icon type="document1-line" style={{ fontSize: 18 }} />,
    5: <Icon type="check1-line" style={{ fontSize: 18 }} />,
    6: <Icon type="view-list-line" style={{ fontSize: 18 }} />,
    7: <Icon type="attention1-line" style={{ fontSize: 18 }} />,
  };

  return (
    <SideNav
      style={{ height: '100%' }}
      data={data}
      mode="inline"
      keyExtractor={(i: any) => i.resCode}
      nameExtractor={(i: any) =>
        i.name.length > '8' ? (
          <Tooltip placement="bottom" message={i.name}>
            {i.name}
          </Tooltip>
        ) : (
          i.name
        )
      }
      childrenExtractor={(i: any) => i.children}
      iconExtractor={(i: any) => (iconMap as any)[i.resCode]}
      onChangeSelectedKey={(key: string, data) => {
        props.menuClick(data);
      }}
    />
  );
};

export default connect(({ menuslider, user }: ConnectState) => ({
  menuslider: menuslider,
  systemMenuBar: menuslider.systemMenuBar,
}))(menu);
